<template>
  <div class="app">
    <van-row type="flex" class="head">
      <van-col @click="$router.push('/home')" span="12">
        <van-icon size="30px" name="arrow-left" />
      </van-col>
      <van-col span="12" class="sp_1">设置</van-col>
    </van-row>
    <van-row type="flex" class="bgc">
      <van-col span="24"></van-col>
    </van-row>
    <div class="body">
      <van-row type="flex" class="SetUp1">
        <van-col span="12" class="sp_2">声音提醒</van-col>
        <van-col class="rig" span="12">
          <van-switch v-model="checked" active-color="#07c160" inactive-color="#eae9e9" />
        </van-col>
      </van-row>
      <van-row type="flex" class="SetUp1">
        <van-col span="12" class="sp_2">震动提醒</van-col>
        <van-col class="rig" span="12">
          <van-switch v-model="checked1" active-color="#07c160" inactive-color="#eae9e9" />
        </van-col>
      </van-row>
      <van-row type="flex" class="SetUp1">
        <van-col span="12" class="sp_2">听筒模式</van-col>
        <van-col class="rig" span="12">
          <van-switch v-model="checked2" active-color="#07c160" inactive-color="#eae9e9" />
        </van-col>
      </van-row>
      <van-row type="flex" class="SetUp1">
        <van-col span="12" class="sp_2">接受消息推送</van-col>
        <van-col class="rig" span="12">
          <van-switch v-model="checked3" active-color="#07c160" inactive-color="#eae9e9" />
        </van-col>
      </van-row>
    </div>
    <van-row type="flex" class="bgc">
      <van-col span="24"></van-col>
    </van-row>
    <div class="body_2">
      <router-link to="/passWord">
        <van-row type="flex" class="by2_row">
          <van-col span="20">修改密码</van-col>
          <van-col span="4" class="by2_icon">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </router-link>
      <router-link to="/adsuss">
        <van-row type="flex" class="by2_row">
          <van-col span="20">建议反馈</van-col>
          <van-col span="4" class="by2_icon">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </router-link>
      <router-link to="/agreement">
        <van-row type="flex" class="by2_row">
          <van-col span="20">用户协议</van-col>
          <van-col span="4" class="by2_icon">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </router-link>
    </div>
    <van-row type="flex" class="bgc_1">
      <van-col span="24"></van-col>
    </van-row>
    <div class="body_3">
      <router-link to="/privacypolicy">
        <van-row type="flex" class="by2_row">
          <van-col span="20">隐私政策</van-col>
          <van-col span="4" class="by2_icon">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </router-link>
      <router-link to="/about">
        <van-row type="flex" class="by2_row">
          <van-col span="20">关于我们</van-col>
          <van-col span="4" class="by2_icon">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </router-link>
    </div>
    <van-row type="flex" class="bgc_1">
      <van-col span="24"></van-col>
    </van-row>
    <button type="button" class="but">退出登录</button>
  </div>
</template>
<script>
import { Switch } from "vant";
export default {
  data() {
    return {
      checked: true,
      checked1: true,
      checked2: false,
      checked3: true
    };
  }
};
</script>
<style lang="scss" scoped>
.app {
  .head {
    width: 100%;
    height: 27px;
    padding: 10px 0;
    .sp_1 {
      font-weight: 540;
      font-size: 20px;
    }
  }
  .bgc {
    height: 19px;
    background-color: #eae9e9;
  }

  .bgc_1 {
    height: 12px;
    background-color: #eae9e9;
  }
  .body {
    padding-left: 10px;
    .SetUp1 {
      padding: 7px 0;
      border-bottom: 1px solid #eae9e9;
      .sp_2 {
        font-size: 17px;
        line-height: 35px;
      }
      .rig {
        text-align: right;
        padding-right: 20px;
      }
    }
  }
  .body_2 {
    padding-left: 10px;
    .by2_row {
      height: 35px;
      line-height: 35px;
      border-bottom: 1px solid #eae9e9;
      font-size: 17px;
      color: black;
      .by2_icon {
        padding-left: 20px;
      }
    }
  }
  .body_3 {
    padding-left: 10px;
    .by2_row {
      height: 35px;
      line-height: 35px;
      border-bottom: 1px solid #eae9e9;
      font-size: 17px;
      color: black;
      .by2_icon {
        padding-left: 20px;
      }
    }
  }
  .but {
    width: 70%;
    height: 35px;
    margin: 10px 15%;
    color: white;
    background-color: #f3583a;
    border: 1px #f3583a solid;
    border-radius: 5px;
  }
}
</style>